<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>股票板块</title>
    <link href="layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="layui/layui.js"></script>
    <link href="layui/css/layui.css" rel="stylesheet">
    <script src="layui/layui.js" charset="utf-8"></script>
    <script src="layuimini/js/lay-config.js" charset="utf-8"></script>
</head>
<body>
<!--显示在表头的工具条-->
<script type="text/html" id="toolBar">
    <div style="float: left">
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-primary" id="btn-expand" lay-event="btn-expand">全部展开</button>
            <button class="layui-btn layui-btn-primary" id="btn-fold" lay-event="btn-fold">全部折叠</button>
            <button class="layui-btn layui-btn-sm" data-type="reload" lay-event="insert">新增子板块</button>
            <button class="layui-btn layui-btn-sm" data-type="reload" lay-event="insertFather">新增父板块</button>
        </div>
    </div>
</script>

<div>
    <div class="layui-inline" style="float:right;height:29px;">
    </div>

</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
    //加载表格
    layui.use(['table', 'treetable', 'element', 'form', 'layer', 'laydate'], function(){
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#statisticsDates'
        })

        // 渲染表格
        treetable.render({
            id:'demo',
            treeColIndex: 2,
            treeSpid: '000',
            treeIdName: 'plateId',
            treePidName: 'plateFatherId',
            elem: '#demo',
            toolbar: '#toolBar',//显示在表头的工具条
            url: 'selectPlate',
            page: false,
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'plateId', title: 'ID', fixed: 'left'}
                    ,{field: 'plateName', title: '板块名称'}
                    ,{field: 'plateFatherId', title: '父板块Id'}
                    ,{field: 'plateRemark', title: '备注'}
                    ,{ title: '操作', toolbar: '#barDemo'}
                ]
            ],
            done: function () {
                // layer.closeAll('loading');
            },
        });

        //监听增加的工具栏
        table.on('tool(demo)', function (obj) {
            switch (obj.event) {
                case"edit":
                    layer.open({
                        type:2,
                        title:'修改员工',
                        content:"updatePlate",
                        area:['800px','400px'],
                        closeBtn:1,
                        success:function (layero,index) {
                            var body = layer.getChildFrame('body',index);
                            body.find("#plateId").val(obj.data.plateId);
                            body.find("#plateName").val(obj.data.plateName);
                            body.find("#plateFatherId").val(obj.data.plateFatherId);
                            body.find("#plateRemark").val(obj.data.plateRemark);
                        }
                    });
                    break;
                case "del":
                    layer.confirm('您确定要删除吗', function (index) {
                        $.getJSON("deletePlate"
                            , {plateId: obj.data.plateId}
                            , function (msg) {
                                if (msg == 1) {
                                    layer.close(index)
                                    table.reload('demo');
                                }
                            })
                    })
                    break;
            }
        })
        table.on('toolbar(demo)', function (obj) {
            //获取选中复选框的对象，
            var checkStatus = table.checkStatus(obj.config.id);//得到表格选中行的ID
            switch (obj.event) {
                case 'insert':
                    layer.open({
                        type: 2,
                        title: "添加子版块",
                        content: "addPlate",
                        area: ['800px', '500px'],
                        //层销毁后触发
                        end: function () {
                            //刷新页面
                            table.reload('demo');

                        }
                    })
                    form.render();
                    //全屏
                    //layer.full(index);
                    break;
                case 'insertFather':
                    layer.open({
                        type: 2,
                        title: "添加父板块",
                        content: "addFatherPlate",
                        area: ['800px', '500px'],
                        //层销毁后触发
                        end: function () {
                            //刷新页面
                            table.reload('tableId');
                        }
                    })
                    form.render();
                    //全屏
                    //layer.full(index);
                    break;
                <!--展开按钮-->
                case 'btn-expand':
                    treetable.expandAll('#demo');
                    break;
                case 'btn-fold':
                    <!--折叠按钮-->
                    treetable.foldAll('#demo');
                    break;
            }
        });
    });
</script>
</body>
<table id="demo" lay-filter="demo"></table>
</html>
